<template>
   <tab-bar>
      <!-- 插槽插入的位置 -->
      <!-- 我是tabbar插槽要插入插槽的内容 -->
      <!-- 这里传递动态路径和动态颜色  -->
      <tab-bar-item path='/home'>  <!-- activeColor='pink'> -->
        <!-- 我是tab-bar-item插槽插入的内容-->
        <template #item-icon>
          <!-- <img src="../../assets/img/logo.png" alt=""> -->
          <img src="~assets/img/logo.png" alt="">
        </template>
        <template #item-icon-active>
          <!-- <img src="../../assets/img/hhh.jpg" alt=""> -->
          <img src="~assets/img/hhh.jpg" alt="">
        </template>
        <template #item-text>
          <div>首页</div>
        </template>
      </tab-bar-item>  
      <tab-bar-item path='/cart'>
       <template #item-icon>
          <!-- <img src="../../assets/img/logo.png" alt=""> -->
          <img src="~assets/img/logo.png" alt="">
        </template>
        <template #item-icon-active>
          <!-- <img src="../../assets/img/hhh.jpg" alt=""> -->
          <img src="~assets/img/hhh.jpg" alt="">

        </template>
        <template #item-text>
          <div>分类</div>
        </template>
      </tab-bar-item>  
      <tab-bar-item path='/categeory'>
         <template #item-icon>
           <!--别名用法 -->
          <!-- <img src="../../assets/img/logo.png" alt=""> -->
          <img src="~assets/img/logo.png" alt="">
        </template>
        <template #item-icon-active>
          <!-- <img src="../../assets/img/hhh.jpg" alt=""> -->
          <img src="~assets/img/hhh.jpg" alt="">

        </template>
        <template #item-text>
          <div>购物车</div>
        </template>
      </tab-bar-item>  
      <tab-bar-item path='/profile'>
        <template #item-icon>
          <!-- <img src="../../assets/img/logo.png" alt=""> -->
          <img src="~assets/img/logo.png" alt="">

        </template>
        <template #item-icon-active>
          <!-- <img src="../../assets/img/hhh.jpg" alt=""> -->
          <img src="~assets/img/hhh.jpg" alt="">

        </template>
        <template #item-text>
          <div>我的</div>
        </template>
      </tab-bar-item>    
    </tab-bar>
    
</template>



<script>
import tabBar from '../common/tabbar/tableBar'
import TabBarItem from '../common/tabbar/tabBarItems'
export default {
  name:'MainTabBar',
  components:{
    tabBar,
    TabBarItem
  }
}
</script>


<style scoped>

</style>